<template>
  <div class="sunburst-chart" ref="container"></div>
</template>

<script setup lang="ts">
import { onMounted, watch, PropType } from "vue";
import useEcharts from "../../utils/useCharts";

const { container, echarts, setOption } = useEcharts();

interface CategoryItem {
  catCode: string;
  catSeqNum: number;
  catName: string;
  catParentCode: string | null;
  catLevel: number;
  catDesc: string | null;
  catStandards: any;
  children?: CategoryItem[];
}

const props = defineProps({
  tableData: {
    type: Array as PropType<CategoryItem[]>,
    default: () => [],
  },
});

const colors = ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C'];

const itemStyle = {
  level1: {
    color: colors[0]
  },
  level2: {
    color: colors[1]
  },
  level3: {
    color: colors[2]
  },
  level4: {
    color: colors[3]
  }
};

const transformData = (data: CategoryItem[]) => {
  // 处理第一层数据
  const processFirstLevel = (items: CategoryItem[]) => {
    return items.map(item => ({
      name: item.catName,
      itemStyle: {
        color: colors[0]
      },
      children: item.children ? processSecondLevel(item.children) : []
    }));
  };

  // 处理第二层数据
  const processSecondLevel = (items: CategoryItem[]) => {
    return items.map(item => ({
      name: item.catName,
      itemStyle: {
        color: colors[1]
      },
      children: item.children ? processThirdLevel(item.children) : []
    }));
  };

  // 处理第三层数据
  const processThirdLevel = (items: CategoryItem[]) => {
    return items.map(item => ({
      name: item.catName,
      itemStyle: {
        color: colors[2]
      },
      children: item.children ? processFourthLevel(item.children) : []
    }));
  };

  // 处理第四层数据
  const processFourthLevel = (items: CategoryItem[]) => {
    return items.map(item => ({
      name: item.catName,
      value: 1,
      itemStyle: {
        color: colors[3]
      },
      label: {
        color: colors[3]
      }
    }));
  };

  // 处理样式
  const processStyles = (transformedData: any[]) => {
    for (let j = 0; j < transformedData.length; ++j) {
      let level1 = transformedData[j].children;
      for (let i = 0; i < level1.length; ++i) {
        let level2 = level1[i].children;
        level1[i].itemStyle = {
          color: transformedData[j].itemStyle.color
        };
        if (level2) {
          level2.forEach((item: any) => {
            if (item.children) {
              item.children.forEach((child: any) => {
                child.label = {
                  color: child.itemStyle.color
                };
              });
            }
          });
        }
      }
    }
    return transformedData;
  };

  const transformedData = processFirstLevel(data);
  return processStyles(transformedData);
};

const generateOptions = (data: any[]) => {
  return {
    tooltip: {
      trigger: 'item',
      backgroundColor: '#2f2f48',
      borderColor: '#2f2f48',
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      type: 'sunburst',
      center: ['50%', '50%'],
      data: data,
      radius: ['20%', '85%'],
      label: {
        show: true,
        position: 'inside',
        rotate: 'radial',
        textBorderColor: null,
        color: '#333',
        fontSize: 14,
        formatter: function(params: any) {
          return params.name;
        }
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: '#fff'
      },
      levels: [
        {},
        {
          r0: '20%',
          r: '35%',
          label: {
            rotate: 0,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        {
          r0: '35%',
          r: '55%',
          label: {
            fontSize: 14
          }
        },
        {
          r0: '55%',
          r: '70%',
          label: {
            fontSize: 13,
            align: 'left'
          }
        },
        {
          r0: '70%',
          r: '85%',
          label: {
            fontSize: 12,
            position: 'outside',
            padding: 3,
            silent: false
          }
        }
      ]
    }]
  };
};

// 监听数据变化
watch(
  () => props.tableData,
  (newData) => {
    if (newData && newData.length > 0) {
      const transformedData = transformData(newData);
      const options = generateOptions(transformedData);
      setOption(options);
    }
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  if (props.tableData && props.tableData.length > 0) {
    const transformedData = transformData(props.tableData);
    const options = generateOptions(transformedData);
    setOption(options);
  }
});
</script>

<style lang="scss" scoped>
.sunburst-chart {
  width: 100%;
  height: 100%;
}
</style>
